<template>
  <div class="top-right-btn">
    <el-row>
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="small" circle :icon="Search" @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="small" circle :icon="Refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip v-if="explain" class="item" effect="dark" content="说明文档" placement="top">
        <el-button size="small" type="info"
                   style="margin-right: 20px"
                   circle :icon="Message" @click="showExplain()" />
      </el-tooltip>
    </el-row>

    <el-drawer append-to-body
        title="使用说明" size="50%"
        :visible.sync="open"
        :with-header="true">
      <span>先这样，然后这样，然后这样。。。。</span>
    </el-drawer>
  </div>
</template>
<script setup>
// import {defineProps,ref,defineEmits} from 'vue'
import {ref} from'vue'
import {
  Message,
  Search,
  Refresh
} from '@element-plus/icons-vue'

defineProps({
  showSearch: {
    type: Boolean,
    default: true
  },
  explain: {
    type: String,
    default: "还没有使用文档，请联系管理员!!"
  }
})
const emits = defineEmits(["updateShowSearch","queryTable"])

const value = ref([])
const title = ref("显示/隐藏")
const open = ref(false)

// 搜索
const toggleSearch=()=> {
  emits("updateShowSearch");
}
// 刷新
const refresh=()=> {
  emits("queryTable");
}
// 打开使用说明
const showExplain=()=> {
  open.value = true;
}

</script>
<style lang="scss" scoped>
.el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0;
}
.el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>
